import React, { Component, PureComponent } from 'react'
import {
    View,
    Text,
    Image,
    StyleSheet,
    ListView,
    TouchableOpacity,
    Alert,
    ScrollView,
    RefreshControl,                         //刷新小组件
    ActivityIndicator                       //底部刷新小组件
} from 'react-native';
import { connect } from '../../../utils/dva';
// import { HomeStyle as styles } from '../../../styles/index'
const list_ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })          //ListView数据源设置



@connect(({ global, home }) => ({
    home,
}))
export default class Home extends Component {

    state = {

    }
    reloadWordData = () => {                                  //下拉时候触发刷新
        console.log('我执行了')
        this.props.dispatch({                   //发起调度
             type: 'home/setState',
            payload: {
                xiala_refresh: true,
            },
        })
        setTimeout(() => {
            this.props.dispatch({                   //发起调度
                 type: 'home/setState',
                payload: {
                    xiala_refresh: false,
                    list: [{ name: '张三' }, { name: '李四' }, { name: '王五' }, { name: '王五' }, { name: '王五' }, { name: '张三' }, { name: '李四' }]
                },
            })
        }, 2000)
    }
    onEndReached = () => {
        const { home } = this.props                           //下拉到底部执行
        console.log('执行了dibu')
        this.props.dispatch({                   //发起调度
            type: 'home/setState',
            payload: {
                shangla_refresh: true,
            },
        })
        setTimeout(() => {
            var list = home.list
            list.push({ name: '张三' })
            list.push({ name: '张三' })
            list.push({ name: '张三' })
            this.props.dispatch({                   //发起调度
                 type: 'home/setState',
                payload: {
                    shangla_refresh: false, list: list
                },
            })

        }, 2000)
    }
    renderRow = (rowData, sectionId, rowId, highlightRow) => {     //返回单行
        const { home } = this.props  
        const list = home.list
        let marginBottom = rowId != list.length - 1 ? 30 : 0
        return (
            <View key={rowId} style={[styles.row, marginBottom]} >
                <View style={styles.row_cont}>
                    <Text>{rowData.name}</Text>
                </View>
            </View>
        )
    }
    renderFooter = () => {                                   //返回底部组件          
        return (
            <View style={[{ marginVertical: 0 }, styles.footer_refresh]}>
                <ActivityIndicator
                    style={styles.footer_refresh_cont}
                    size='large'  //large
                />
            </View>
        );
    }

    render = () => {

        const { home } = this.props
        return (
            <ListView
                refreshControl={                            //是否更新
                    <RefreshControl                         //刷新控件
                        refreshing={home.xiala_refresh}                  //刷新时候的小控件
                        onRefresh={() => { this.reloadWordData() }}
                        colors={['red', '#c0c0c0', 'green']}
                        progressBackgroundColor={'#fff'}

                    />}
                dataSource={list_ds.cloneWithRows(home.list)}         //数据源(数组)
                renderRow={this.renderRow}                 //便利数组的回调函数
                onEndReached={this.onEndReached}          //屏幕到底部的触发的事件
                renderFooter={this.renderFooter}           //底部刷新组件
                onEndReachedThreshold={20}                 //设为距离底部还有多少执行底部事件
            />
        )
    }
}

const styles = StyleSheet.create({
    row: {

        backgroundColor: '#fff',
        flexDirection: 'row',
        // justifyContent:'space-around',
        alignItems: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,
    },
    row_cont: {
        flex: 1,
        height: 50,
        backgroundColor: 'green',

    },
    footer_refresh: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',

    },
    footer_refresh_cont: {
        // height: 40,
    }

});
